import React, { useEffect, useState } from "react";
import {
  LeftOutline,
  MessageOutline,
  LikeOutline,
  StarOutline,
  MoreOutline,
} from "antd-mobile-icons";
import { Badge } from "antd-mobile";
import Api from "@/api";
import MySkeleton from "@/components/MySkeleton.jsx";
import "./Detail.scss";

export default function Detail(props) {
  // 在配置路由组件时已经把路由相关信息传参过来了
  const { navigate, params } = props;

  const [info, setInfo] = useState(null),
    [extra, setExtra] = useState(null);

  // 获取数据
  useEffect(() => {
    try {
      (async () => {
        const [newsInfo, newsStory] = await Promise.all(
          [Api.queryNewsInfo(params.id), Api.queryNewsStory(params.id)].map(
            (v) => v.catch((e) => console.log(e))
          )
        );
        setExtra(newsStory);
        setInfo(newsInfo);
      })();
    } catch (error) {
      console.log(error);
    }
  }, []);

  // 处理样式、图片
  let link;
  const handleImg = () => {
    let imgPlaceHolder = document.querySelector(".img-place-holder");
    if (!imgPlaceHolder || !info) return;

    let tempImg = new Image();
    tempImg.src = info.image;
    tempImg.onload = () => {
      imgPlaceHolder.appendChild(tempImg);
    };
    tempImg.onerror = () => {
      let parent = imgPlaceHolder.parentNode;
      parent.parentNode.removeChild(parent);
    };
  };
  const handleStyle = () => {
    if (info) {
      // 确保css存在
      if (!Array.isArray(info.css)) return;
      let css = info.css[0];
      if (!css) return;

      // css存在再设置样式引入
      link = document.createElement("link");
      link.rel = "stylesheet";
      link.href = css;

      // 添加到document中
      document.head.appendChild(link);
    }
  };
  useEffect(() => {
    try {
      handleImg();
      handleStyle();
    } catch (error) {
      console.log(error);
    }

    return () => {
      // 移除添加的样式
      if (link) document.head.removeChild(link);
    };
  }, [info]);

  return (
    <div className="detail-box">
      {/* 新闻内容 */}
      {!info ? (
        <MySkeleton />
      ) : (
        <div
          className="content"
          dangerouslySetInnerHTML={{ __html: info.body }}
        ></div>
      )}

      {/* 底部图标 */}
      <div className="tab-bar">
        <div
          className="back"
          onClick={() => {
            navigate(-1);
          }}
        >
          <LeftOutline fontSize="20px" />
        </div>
        <div className="icons">
          <Badge content={extra ? extra.comments : 0}>
            <MessageOutline fontSize="20px" />
          </Badge>
          <Badge content={extra ? extra.popularity : 0}>
            <LikeOutline fontSize="20px" />
          </Badge>
          <span className="stored">
            <StarOutline fontSize="20px" />
          </span>
          <span>
            <MoreOutline fontSize="20px" />
          </span>
        </div>
      </div>
    </div>
  );
}
